<template>
    <!-- 下载记录 -->
    <div>
      <!-- 表格数据 -->
      <div class="table_box" v-loading="downloadLoading">
        <el-table :data="tableData" ref="multipleTable" class="historyTable" style="width: 100%;height: 400px;overflow-y: auto;">
          <el-table-column prop="name" label="用户名" show-overflow-tooltip></el-table-column>
  
          <el-table-column prop="editionName" label="文件版本">
            <template #default="scope">
              {{ scope.row.editionName ? scope.row.editionName : '-' }}
            </template>
          </el-table-column>
  
  
          <el-table-column prop="createTime" label="查看时间" width="150px"></el-table-column>
        </el-table>
      </div>
  
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="requestStr.page"
          :page-size="requestStr.size"
          layout="total, prev, pager, next"
          :total="requestStr.total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
    
    <script setup lang="ts">
  import { ref, reactive, defineProps, defineExpose, getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance() as any;
  import { apiFilesRecentlyViewed } from '@/api/enterpriseDoc/enterpriseDocApi';
  const downloadLoading = ref(false);
  const tableData = ref([]);
  const requestStr = reactive({
    page: 1,
    size: 10,
    total: 0
  });
  const parentOdj:any = ref({});
  
  const props = defineProps({
    fileDetailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  });
  
  //获取表格数据
  const getList = (row:any) => {
    // downloadLoading.value = true;
    parentOdj.value = row;
    let oParam = {
      moduleId: parentOdj.value.id,
      type: 'enterprise',
      storageId: row.storageId ? row.storageId : '',
      page: requestStr.page ,
      size: requestStr.size
    };
    apiFilesRecentlyViewed(oParam)
      .then((res: any) => {
        downloadLoading.value = false;
        if (res.code == 200) {
          downloadLoading.value = false;
          tableData.value = res.rows;
          requestStr.total = res.total;
        }
      })
      .catch((err) => {
        downloadLoading.value = false;
      });
  };
  
  // 分页
  const handleCurrentChange = (val) => {
    requestStr.page = val;
    getList(parentOdj.value);
  };
  
  defineExpose({
    //调用组件需要导出 v-model的变量
    getList
  });
  </script>
    
    <style scoped lang="scss">
  .table_box {
    ::v-deep th {
      color: #666;
      font-weight: normal;
      font-size: 14px;
      height: 51px;
    }
    ::v-deep tr {
      color: #333;
      height: 51px;
    }
    ::v-deep .el-table__body tr:hover .realName_box_right {
      visibility: visible;
    }
  }
  .peopleBox {
    display: flex;
    align-items: center;
    .people {
      width: 26px;
      height: 26px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      background-color: #56abfb;
      margin-right: 3px;
      span {
        display: inline-block;
        margin-top: 2px;
        transform: scale(0.9, 0.9);
      }
    }
  }
  </style>
    